<template>
    <div>
        <!--        <div class="wxb-upload-multi">-->
        <!--12312-->
        <!--        </div>-->
        <div class="wxb-upload-multi">
            <draggable :sort="true" v-model="photo" @update="datadragEnd"
                style="width:100%;display: flex;flex-direction: row;flex-wrap: wrap">
                <div v-for="(val, key) in photo" :key="key" class="have-image" :style="{ width: w, height: h }">
                    <el-image style="width: 100%;height: 100%" :src="val" fit="cover"></el-image>
                    <i class="el-icon-error close" @click="clearphoto(key)"></i>
                </div>
            </draggable>
            <div @click="showPhoto = true" class="image-box " :style="{ width: w, height: h }">
                <i class="el-icon-plus plus" :style="{ lineHeight: h }"></i>
            </div>
        </div>
        <photos @select="getPhoto" :multi="true" :show-photo="showPhoto" v-model="showPhoto"></photos>
    </div>
</template>

<script>
import Photos from "./Photos";
import draggable from 'vuedraggable'

export default {
    name: "UploadMulti",
    components: { Photos, draggable, },
    props: {
        w: { default: '100px' },
        h: { default: '100px' },
        value: { default: () => ([]) },
    },
    data() {
        return {
            showPhoto: false,
            photo: this.value,
        }
    },
    watch: {
        value() {
            this.photo = this.value;
        },
    },
    methods: {
        datadragEnd() {
            this.$emit("input", this.photo);
        },
        getPhoto(photo) {
            photo.forEach((value) => {
                this.photo.push(value);
            });
            this.$emit("input", this.photo);
        },
        clearphoto(key) {
            this.photo.splice(key, 1);
        },
    },
}
</script>

<style lang="scss" scoped>
.wxb-upload-multi {
    box-sizing: border-box;
    cursor: pointer;
    font-size: 20px;
    vertical-align: middle;
    text-align: center;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;

    .image-box {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;

        .plus {
            font-size: 28px;
            color: #8c939d;
            text-align: center;
        }

    }

    .have-image {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;

        .close {
            font-size: 20px;
            position: absolute;
            top: -10px;
            right: -10px;
            display: none;
            color: var(--main-color);
        }
    }

    .have-image:hover {
        border: 1px dashed var(--main-color);
        ;

        .close {
            display: block
        }
    }

    .image-box:hover {
        border: 1px dashed var(--main-color);
        ;

        .plus {
            color: var(--main-color);
        }

    }
}
</style>
